<!--  -->
<template>
  <div class="home">
    <div class="banner">
      <swiper :options="swiperOption" >
        <swiper-slide>
          <img src="@/assets/img/swipe1.png" alt="" width="100%" height="600">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/swipe2.png" alt="" width="100%" height="600">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
    <div class="container">
   <!--   <div class="title">
        <h2 class="wow   bounceInRight fast">特色课程</h2>
        <el-divider class="wow   bounceInRight faster">
          <svg  t="1564560540049" class="icon wow   bounceInRight faster" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3478" width="64" height="64"><path d="M981.600015 373.726208 981.600015 543.26272l35.689472 35.699712-74.415104 77.443072-75.336704-75.158528 51.58912-46.90944L919.126799 400.489472c-218.90048 90.257408-289.074176 118.310912-337.620992 140.2112-48.54784 21.900288-83.506176 21.789696-131.652608 3.647488-48.1536-18.147328-277.363712-101.80096-391.17824-156.269568-75.948032-36.340736-80.837632-59.388928 1.304576-90.231808 107.200512-40.725504 284.38528-105.946112 378.305536-141.541376 55.593984-22.490112 84.995072-34.768896 136.026112-9.121792C665.431823 184.810496 873.641743 262.941696 977.174287 305.6896 1067.299599 345.020416 1006.710543 357.957632 981.600015 373.726208L981.600015 373.726208zM592.063247 607.809536c52.936704-21.84192 124.314624-57.957376 202.141696-91.298816L794.204943 784.20992c0 0-100.652032 107.07456-277.599232 107.07456-190.558208 0-293.490688-107.07456-293.490688-107.07456L223.115023 534.336512c60.068864 24.4736 127.521792 45.531136 209.153024 73.473024C482.579215 625.71008 546.421519 631.899136 592.063247 607.809536L592.063247 607.809536zM592.063247 607.809536" p-id="3479" fill="#e6e6e6"></path></svg>
        </el-divider>
        <h3 class="wow   bounceInRight fast">以学员满意度、以学员学习效果为本</h3>
      </div>
      <div class="demoList">
        <ul class="clearfix">
          <template v-for="(mode, index) in modeTypeList">
            <transition name="el-zoom-in-center">
              <li class="typeitem1 wow   bounceInLeft fast">
                <img :src="'/static/image/ts' + ++index + '.png'" class="image">
                <p class="teacher">{{mode.value}}</p>
              </li>
            </transition>
          </template>
        </ul>
      </div>-->
      <div class="title">
        <h2 class="wow   bounceInRight fast">明星教师</h2>
        <el-divider class="wow   bounceInRight faster">
          <svg t="1564560540049" class="icon wow   bounceInRight faster" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3478" width="64" height="64"><path d="M981.600015 373.726208 981.600015 543.26272l35.689472 35.699712-74.415104 77.443072-75.336704-75.158528 51.58912-46.90944L919.126799 400.489472c-218.90048 90.257408-289.074176 118.310912-337.620992 140.2112-48.54784 21.900288-83.506176 21.789696-131.652608 3.647488-48.1536-18.147328-277.363712-101.80096-391.17824-156.269568-75.948032-36.340736-80.837632-59.388928 1.304576-90.231808 107.200512-40.725504 284.38528-105.946112 378.305536-141.541376 55.593984-22.490112 84.995072-34.768896 136.026112-9.121792C665.431823 184.810496 873.641743 262.941696 977.174287 305.6896 1067.299599 345.020416 1006.710543 357.957632 981.600015 373.726208L981.600015 373.726208zM592.063247 607.809536c52.936704-21.84192 124.314624-57.957376 202.141696-91.298816L794.204943 784.20992c0 0-100.652032 107.07456-277.599232 107.07456-190.558208 0-293.490688-107.07456-293.490688-107.07456L223.115023 534.336512c60.068864 24.4736 127.521792 45.531136 209.153024 73.473024C482.579215 625.71008 546.421519 631.899136 592.063247 607.809536L592.063247 607.809536zM592.063247 607.809536" p-id="3479" fill="#e6e6e6"></path></svg>
        </el-divider>
        <h3 class="wow   bounceInRight fast">以学员满意度、以学员学习效果为本</h3>
      </div>
      <div class="demoList">
        <ul class="clearfix">
          <li class="typeitem" v-for="(item,index) in teachers" :key="index">
            <div class="pic">
              <img :src="item.pic" class="image wow   fadeInUp fast">
              <i class="el-icon-edit iconedit wow   rollIn fast"></i>
            </div>
            <p class="teacher">{{item.name}}（{{item.subject}}）</p>
            <p class="teacherinfo">{{item.detail}}</p>
            <div class="starbox wow   fadeInDown fast">
              <img src="/static/image/star.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
   <!-- <div class="advantage">
      <div class="adbox">
        <div class="title">
          <h2 class="wow   bounceInRight fast">明星教师</h2>
          <el-divider class="wow   bounceInRight faster">
            <svg t="1564560540049" class="icon wow   bounceInRight faster" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3478" width="64" height="64"><path d="M981.600015 373.726208 981.600015 543.26272l35.689472 35.699712-74.415104 77.443072-75.336704-75.158528 51.58912-46.90944L919.126799 400.489472c-218.90048 90.257408-289.074176 118.310912-337.620992 140.2112-48.54784 21.900288-83.506176 21.789696-131.652608 3.647488-48.1536-18.147328-277.363712-101.80096-391.17824-156.269568-75.948032-36.340736-80.837632-59.388928 1.304576-90.231808 107.200512-40.725504 284.38528-105.946112 378.305536-141.541376 55.593984-22.490112 84.995072-34.768896 136.026112-9.121792C665.431823 184.810496 873.641743 262.941696 977.174287 305.6896 1067.299599 345.020416 1006.710543 357.957632 981.600015 373.726208L981.600015 373.726208zM592.063247 607.809536c52.936704-21.84192 124.314624-57.957376 202.141696-91.298816L794.204943 784.20992c0 0-100.652032 107.07456-277.599232 107.07456-190.558208 0-293.490688-107.07456-293.490688-107.07456L223.115023 534.336512c60.068864 24.4736 127.521792 45.531136 209.153024 73.473024C482.579215 625.71008 546.421519 631.899136 592.063247 607.809536L592.063247 607.809536zM592.063247 607.809536" p-id="3479" fill="#e6e6e6"></path></svg>
          </el-divider>
          <h3 style="color: #fff" class="wow   bounceInRight fast">以学员满意度、以学员学习效果为本</h3>
        </div>
        <div class="adboxinfo">
          <div class="infoitem" >
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgyLry0QUo0JKiqAcw8AE4kQI.png" alt="" class="wow   bounceInLeft faster">
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgyrry0QUo8bCY4QYwigE4igE.png" alt="" class="innerpic wow   bounceInLeft fast">
            <p class="adinfotitile wow   fadeInDown fast">专业课程</p>
            <p class="adinfocontent wow   fadeInDown fast">上百多种专业任您挑选</p>
            <div class="adbtn wow   bounceInRight fast">查看详情</div>
          </div>
          <div class="infoitem" >
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgyLry0QUo0JKiqAcw8AE4kQI.png" class="wow   bounceInLeft faster" alt="">
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgy7ry0QUo9P3nqwcwigE4igE.png" alt="" class="innerpic wow   bounceInLeft fast">
            <p class="adinfotitile wow   fadeInDown fast">专业课程</p>
            <p class="adinfocontent wow   fadeInDown fast">上百多种专业任您挑选</p>
            <div class="adbtn wow   bounceInRight fast">查看详情</div>
          </div>
          <div class="infoitem" >
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgyLry0QUo0JKiqAcw8AE4kQI.png" alt="" class="wow   bounceInRight faster">
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgzbry0QUotdrYywEwigE4igE.png" alt="" class="innerpic wow   bounceInRight fast">
            <p class="adinfotitile wow   fadeInUp fast">专业课程</p>
            <p class="adinfocontent wow   fadeInUp fast">上百多种专业任您挑选</p>
            <div class="adbtn wow   bounceInRight fast">查看详情</div>
          </div>
          <div class="infoitem" >
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgyLry0QUo0JKiqAcw8AE4kQI.png" alt="" class="wow   bounceInRight faster">
            <img src="http://11092584.s61i.faiusr.com/4/AD0I6ISlBRAEGAAgz7ry0QUoi4j-ogcwigE4igE.png" alt="" class="innerpic wow   bounceInRight fast">
            <p class="adinfotitile wow   fadeInUp fast">专业课程</p>
            <p class="adinfocontent wow   fadeInUp fast">上百多种专业任您挑选</p>
            <div class="adbtn wow   bounceInRight fast">查看详情</div>
          </div>
        </div>

      </div>
    </div>-->

  </div>
</template>

<script>
  import  { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  export default {
    components:{
      swiper, swiperSlide
    },
    data () {
      return {
        modeTypeList: [],
        teachers:[
          {name:'王老师',subject:'数学',pic:'http://11092584.s61i.faiusr.com/2/AD0I6ISlBRACGAAguZ_1zwUoyP_X6wUw8gI4hwI.jpg',detail:'主讲数学，注重学生的兴趣和引导 实用结合；被评为受欢迎的女神教师...'},
          {name:'彭老师',subject:'化学',pic:'http://11092584.s61i.faiusr.com/2/AD0I6ISlBRACGAAgwp_1zwUolda-qgIw8gI4hwI.jpg',detail:'主讲化学，注重学生的兴趣和引导 实用结合；被评为受欢迎的女神教师...'},
          {name:'吴老师',subject:'物理',pic:'http://11092584.s61i.faiusr.com/2/AD0I6ISlBRACGAAgxJ_1zwUolPGsuwIw8gI4hwI.jpg',detail:'主讲物理，注重学生的兴趣和引导 实用结合；被评为受欢迎的女神教师...'},
        ],
        swiperOption: {
          autoplay: {
            disableOnInteraction: false,
            delay:3000
          },
          autoplayDisableOnInteraction: false,
          loop: true
        }
      };
    },

    mounted () {

    },

    methods: {

    },
  }

</script>

<style lang='scss' scoped>
  h2 {
    font-size: 36px;
    text-align: center;
    margin: 40px 0;
    font-weight: normal;
  }
  h3 {
    font-size: 18px;
    text-align: center;
    color: #737373;
    margin: 40px 0;
    font-weight: normal;
  }
  .el-divider__text, .el-link {
    font-weight: 500;
    font-size: 45px;
  }

  .demoList ul {
    margin-bottom: 100px;
  }
  .demoList{
    margin: 0 auto;
    padding-top: 30px;
  }
  .demoList li {
    color: #737373;
    width: 260px;
    min-height: 260px;
    float: left;
    margin-right: 50px;
    border-left: 1px solid #eaeceb;
    border-right: 1px solid #eaeceb;
    box-shadow: 0 2px 3px #b2b2b2;
    text-align: center;
  }
  .teacherinfo{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .demoList li:last-child {
    margin-right: -50px;
  }
  .demoList li .teacher {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    text-align: center;
  }
  .typeitem{
    cursor: pointer;
    width: 300px;
  }
  .typeitem1{
    width: 260px!important;
  }
  .demoList li{
    width: 30%;
  }
  .demoList li .pic {
    position: relative;
    height: 200px;
    width: 100%;
    border-bottom: px solid #CA0000;
    margin-bottom: 15px;
  }
  .demoList li .iconedit{
    position: absolute;
    left: 160px;
    bottom: -25px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    text-align: center;
    background-color: #CA0000;
    color: #fff;
    font-size: 24px;
  }
  .demoList li .image {
    height: 199px;
    width: 100%;
    display: block;
  }
  .demoList li .starbox{
    margin: 30px auto;
    width: 230px;
  }
  .demoList li .starbox img{
    width: 100%;
    height: 100%;
  }
  .advantage{width:100%;height: 800px;background: url('/static/image/footerbg.jpg') no-repeat;background-position: center;background-size: 100% 100%; padding-top: 30px;color: #fff; margin-bottom: 40px;}
  .advantage .adbox{width: 1100px;margin: 0 auto;overflow: hidden;}
  .adboxinfo{color: #fff;display: flex}
  .adboxinfo .infoitem{text-align: center;width: 288px;width: 25%;padding: 20px; position: relative;}
  .adboxinfo .infoitem img{width: 200px;margin-bottom: 30px;}
  .adboxinfo .infoitem .innerpic{position: absolute;left: 60px;top:60px;width: 150px;height: 150px;margin-bottom:0px;}
  .adinfotitile{font-size: 16px;font-weight: 500;line-height: 40px}
  .adinfocontent{line-height: 30px}
  .adbtn{width: 100px;height: 40px;line-height: 40px;background-color: #CA0000;border-radius: 5px;text-align: center;margin: 20px auto;cursor: pointer;}
  .advantage .el-divider__text.is-center{background-color: rgba(0,0,0,0);line-height: 1.4;}

  .pics {
    position: absolute;
    animation: turn-over 2s 700ms infinite;
  }

  @keyframes turn-over {
    to {
      transform: rotateX(-180deg);
    }
  }
  .home{
    overflow: hidden;
  }
</style>
